@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');

$white: #ffffff;
$gray: #a0a0a0;
$black: #33332d;
$main: #e1e1e1;
$main--dark: #212121;

$violet: #b795f3;
$green: #aeffda;
$turquoise: #82f7eb;
$dark-orange: #eb8755;
$light-orange: #eeac5d;
$yellow: #f7f382;
$pink: #e693cb;
$blue: #706be4;
$light-blue: #82d2f7;
$light-violet: #b2bbf0;

//Font families
$font-body: 'IBM Plex Mono', monospace;
$font-heading: 'IBM Plex Sans', monospace;

//Font weights
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semi-bold: 600;

//content padding
$mobile-padding: 5px;
$tablet-padding: 7px;
$vertical-spacing: 1rem;

//Widths
$mobile: 310px;
$mobile-content: $mobile - 2 * $mobile-padding;
$tablet: 640px;
$tablet-content: $tablet - 2 * $tablet-padding;
$desktop: 992px;
$desktop-content: $desktop - 255px;
$large: 1300px;
$large-content: $large - 255px;
$xlarge: 1700px;

@mixin from($min-width) {
  @media all and (min-width: $min-width) {
    @content;
  }
}

@mixin to($max-width) {
  @media all and (max-width: $max-width - 1px) {
    @content;
  }
}
